<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <title>index</title>
</head>
<style>
    #listbox{
        border: silver 1px solid;
        width: 500px;
        height: 200px;
        border-radius:30px;
        background-image: url(./5.png);
    }
    li{
        border-bottom: silver 1px solid;
        align-self: start;
    }
    .body{
        align-items: center;
    }
</style>
<body onload="todolist()">
    <h1>待办事项清单</h1>
    <div class="add-task">
        <input type="text" placeholder="添加新事项" size="20" id="task">
        <input type="submit" id="add" value="+" onclick="create()">
        <input type="text" placeholder="请输入要删除事项的ID" id="clear">
        <input type="submit" value="delete" onclick="del()">
        <input type="submit" value="查询全部事项" onclick="select_all()">
        <input type="submit" value="查询已完成事项" onclick="select_true()">
        <input type="submit" value="查询未完成事项" onclick="select_false()">

    </div>
    <ul id="listbox" class="list-task">

    </ul>


</body>
<script>

    function todolist() {
    fetch("/todos")
    .then(response => response.json())
    .then(data => {
        document.getElementById("listbox").innerHTML="";
        var data = data.todos;
        for (var i=0;i<data.length;i++){
            if (!data[i].completed){
                var opt='<li><input type="checkbox" name="'+data[i].id+'" onchange="finish(this.name)" >'
                    +data[i].id + '、<span>'+data[i].title +' </span></li>';
                document.getElementById("listbox").innerHTML+=opt;
            }
        }
    })
    .catch(error => console.log('Error:',error))
    .then(response => console.log('Success:',response));
    }

    function create() {
        var task = document.getElementById("task").value;
        var url = "/todos";
        fetch(url,{
                method:'POST',
                body:"title="+task,
                headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})
            }).then(res => res.json())
            .then(function(data) {

                if ('title' in data){
                    document.getElementById('task').value='';
                    todolist()
                }
            });       
    }

    function finish(id){
        var url="/todos/mark_completed";
        fetch(url+"?id="+id,{
            method:'GET',   
            headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})   
        })
        .then(response => response.json())
        .then(function(data) {

            if ('title' in data){
                todolist()
            }
        });       
    }
    function del() {
        var clear_id = parseInt(document.getElementById("clear").value);
        var url = "/todos/delete_todo";
        fetch(url,{
            method:'POST',
            body:"id="+clear_id,
            headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})   
        })

        .then(function(data) {

<!--                location.reload();两句具有同样作用，任取其一-->
                todolist();

        });
    }

    function select_all() {
        var url="/todos/select_all_todo";
        fetch(url,{
            method:"get",
            headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})
        })
        .then(response => response.json())
        .then(data => {
        document.getElementById("listbox").innerHTML="";
        var data = data.todos;
        for (var i=0;i<data.length;i++){           
            var opt='<li><input type="checkbox" name="'+data[i].id+'" onchange="finish(this.name)">'
                +data[i].id + '、<span>'+data[i].title +' </span></li>';
            document.getElementById("listbox").innerHTML+=opt;
            
        }
    });
    }
      
    function select_true() {
        var url="/todos/select_todo";
        fetch(url,{
            method:"get",
            headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})
        })
        .then(response => response.json())
        .then(data => {
        document.getElementById("listbox").innerHTML="";
        var data = data.todos;
        for (var i=0;i<data.length;i++){

            if(data[i].completed){
                var opt='<li><input type="checkbox" name="'+data[i].id+'" onchange="finish(this.name)">'
                    +data[i].id + '、<span>'+data[i].title +' </span></li>';
                document.getElementById("listbox").innerHTML+=opt;
            }
        }
    });

    }

    function select_false() {
        var url="/todos/select_todo";
        fetch(url,{
            method:"get",
            headers:new Headers({"Content-Type":"application/x-www-form-urlencoded"})
        })
        .then(response => response.json())
        .then(data => {
        document.getElementById("listbox").innerHTML="";
        var data = data.todos;
        for (var i=0;i<data.length;i++){
            if(!data[i].completed){
                var opt='<li><input type="checkbox" name="'+data[i].id+'" onchange="finish(this.name)">'
                    +data[i].id + '、<span>'+data[i].title +' </span></li>';
                document.getElementById("listbox").innerHTML+=opt;
            }
        }
    });

    }



</script>
</html>